<template>
  <!-- 顶部栏 -->
  <el-header class="header">
    <!-- 网站名 -->
    <div class="header-title">算法学习与动画演示平台</div>

    <!-- 消息速推 -->
    <div class="news">
      <img class="icon" src="../icons//news.svg" alt="">
      <div class="textBox">
        <transition name="slide">
          <p class="text" :key="text.id">{{ text.val }}</p>
        </transition>
      </div>
    </div>

    <!-- 地理位置 -->
    <div class="location">
      <img class="icon" src="../icons/location.svg">
      <div class="city" v-if="city === '长沙市'">{{ city }}</div>
      <div class="city" v-if="city !== '长沙市'">长沙</div>
    </div>

    <!-- 用户模块 -->
    <div>
      <!-- 已登录 -->
      <div v-if="isGetterRouter" class="user">
        <div>{{ user.user_name }}</div>
        <div class="avatar">
          <el-avatar :size="50" fit="cover" :src="getImageUrl('avatar/' + userAvatar)" />
        </div>
        <div class="logout-btn" @click="handleLogout">登出</div>
      </div>
      <!-- 已登录 -->
      <!-- 未登录 -->
      <div v-else class="user">
        <div>欢迎</div>
        <div class="avatar">
          <el-avatar :size="50" fit="cover" :src="noLogin" />
        </div>
        <div class="login-btn" @click="handleLogin">登录/注册</div>
      </div>
      <!-- 未登录 -->
    </div>
  </el-header>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "../store/useUserStore.js";
import { useRouterStore } from "../store/useRouterStore.js"
import { storeToRefs } from "pinia";
import { computed } from "vue";

// 地理位置部分
const city = ref("");
axios
  .get("https://restapi.amap.com/v3/ip", {
    params: {
      key: "112f7278845a2b4a727d04cffeb63b0b",
    },
  })
  .then(({ data }) => {
    // console.log(data);
    city.value = data.city;
  });

// 用户部分
const noLogin = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
const router = useRouter();
const route = useRoute();
const userAvatar = ref("");
// 加载图片
const getImageUrl = (url) => {
  // 里面可以根据需求写逻辑
  return new URL('../assets/' + url, import.meta.url).href;
};
// 响应式解构赋值
const userStore = useUserStore();
const { user } = storeToRefs(userStore);
userAvatar.value = user.value.user_avatar;
const routerStore = useRouterStore();
const { isGetterRouter } = storeToRefs(routerStore);
// 登录/注册按钮
const handleLogin = () => {
  router.push('/login');
}
// 登出按钮
const handleLogout = () => {
  if (user.value.role === 0) {
    router.push("/home");
  } else {
    router.push("/login");
  }
  userStore.changeUser({});
  user.value.role = 0;
  routerStore.changeRouter(false);
}

// 消息速推
const newslist = ref([]);
const getNewsList = async () => {
  await axios.get(`/oasadapi/news`).then((res) => {
    res.data.map((v, i) => {
      newslist.value[i] = v.text;
    })
  })
}
var number = ref(0);
const text = computed(() => {
  return {
    id: number.value,
    val: newslist.value[number.value]
  }
})
onMounted(() => {
  getNewsList();
  starMove();
})
const starMove = () => {
  let timer = setTimeout(() => {
    if (number.value === newslist.value.length - 1) {
      number.value = 0;
    } else {
      number.value += 1;
    }
    starMove();
  }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
}

</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// 图标样式
.icon {
  width: 22px;
  height: 22px;
  margin-right: 5px;
}

// 顶部栏样式
.header {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: black;
  background: rgba(56, 109, 241, .05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .1);

  // 网站名
  .header-title {
    position: absolute;
    //top: 22px;
    left: 2%;

  }

  // 消息速推
  .news {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    width: 270px;
    cursor: default;
    border-radius: 14px;

    .textBox {
      width: 100%;
      height: 40px;
      overflow: hidden;
      position: relative;
      line-height: 40px;
    }

    .text {
      width: 100%;
      position: absolute;
    }

    .slide-enter-active,
    .slide-leave-active {
      transition: all 0.6s linear;
    }

    .slide-enter-from {
      transform: translateY(20px) scale(1);
      opacity: 0;
    }

    .slide-leave-to {
      transform: translateY(-20px) scale(1);
      opacity: 0;
    }
  }


  // 地理位置
  .location {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 240px;
    cursor: default;
  }

  // 用户模块
  .user {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 2.5px;
    right: 30px;

    // 头像
    .avatar {
      width: 50px;
      height: 50px;
      margin-left: 5px;
      margin-right: 5px;


      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    // 登出按钮
    .logout-btn {
      width: 60px;
      height: 30px;
      background: linear-gradient(#5a6bea, #1de9ed);
      border-radius: 14px;
      color: white;
      text-align: center;
      line-height: 30px;
      box-shadow: 1px 1px 2px #1a1a1a;
      cursor: pointer;
      transition: all 0.3s linear;

      // 鼠标移动到按钮上
      &:hover {
        transform: scale(1.1);
      }

      // 鼠标按下
      &:hover:active {
        transform: translateY(2px);
        box-shadow: inset 1px 1px 1px #777;
      }
    }

    // 登录按钮
    .login-btn {
      width: 85px;
      height: 30px;
      background: linear-gradient(#5a6bea, #1de9ed);
      border-radius: 14px;
      color: white;
      text-align: center;
      line-height: 30px;
      box-shadow: 1px 1px 2px #1a1a1a;
      cursor: pointer;
      transition: all 0.3s linear;

      // 鼠标移动到按钮上
      &:hover {
        transform: scale(1.1);
      }

      // 鼠标按下
      &:hover:active {
        transform: translateY(2px);
        box-shadow: inset 1px 1px 1px #777;
      }
    }
  }

}
</style>